/*
 * @Author: funlee
 * @Email: i@funlee.cn
 * @Date: 2019-06-21 14:19:09
 * @Description: 首页-控制台-管控预警
 */
@import "@/assets/style/global.scss";

@mixin topIcon($item-name: yjzsl) {
    &.#{$item-name}-icon {
        background: url('../images/gkyj_'+ $item-name +'.png') no-repeat center;
        background-size: 100% 100%;
    }
}
.console-warning{
    width: 80%;
    margin: 0 auto;
    .top-num-list {
        margin-top: 0;
        display: flex;
        justify-content: space-between;

        li {
            display: flex;
            align-items: center;

            .icon {
                width: 32px;
                height: 36px;
                @include topIcon(yjzsl);
                @include topIcon(jryjsl);
                @include topIcon(appsl);
                @include topIcon(ryyjsl);
            }

            .detail {
                font-size: 12px;
                margin-left: 10px;
                .value {
                    color: $yellow;
                    font-size: 16px;
                    margin-bottom: 6px;
                }

                .name {
                    color: $gray;
                    font-size: 14px;
                }
            }
        }
    }
    .lists-data{
        margin-top: 20px;
        width: 100%;
        overflow: hidden;
        max-height: 640px;
        overflow-y: auto;
        li{
            width: 100%;
            margin-bottom: 20px;
            background: #2c303d;
            display: flex;
            padding: 20px 30px;
            &:hover{
                background: $dropBgColor;
            }
            .list-logo{
                width: 40px;
                height: 60px;
                display: block;
                overflow: hidden;
            }
            .detail{
                width: 80%;
                margin-left: 20px;
                p{
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: $gray;
                    font-size: 14px;
                    width: 100%;
                    &.first{
                        font-size: 16px;
                        color: $grayLight;
                        margin-bottom: 20px;
                        span{
                            margin-right: 40px;
                        }
                        .name{
                            color: $blue;
                            font-weight: bold;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
